<template>
  <div class="app-container checkContainer">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small"> 
        <dj-store-select :category="567" :defaultStore="formInline.store_id" :needItem="true" @change="selectStoreChanged" />
        <el-form-item>
          <el-date-picker v-model="pickerDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="退货渠道" v-model="formInline.type">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <!-- <dj-simple-table :columns="tableColumns" :data="listData" :global="global" :loading="listLoading" /> -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="mini">
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            <b>{{scope.$index + 1}}</b>
          </template>
        </el-table-column>
        <el-table-column align="center" label="退货单号" prop="order_id"> </el-table-column>
        <el-table-column align="center" label="退货渠道">
          <template slot-scope="scope">
            {{scope.row.type | returnType}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="收货方" prop="receive_name"></el-table-column>
        <el-table-column align="center" label="入库时间" prop="time"></el-table-column>
        <el-table-column align="center" label="实退货数量（个）" prop="all_num">
          <template slot-scope="scope">
            <router-link :to="{name:'report/return_detail_form',params :{id:scope.row.id,store_name:storeName,order_id:scope.row.order_id,receive_name:scope.row.receive_name,time:scope.row.time,routerflag:1}}">
              <el-button class="primary" type="text"> {{scope.row.all_num}}</el-button>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="实退货金额（元）" prop="all_money">
          <template slot-scope="scope">
            <router-link :to="{name:'report/return_detail_form',params :{id:scope.row.id,store_name:storeName,order_id:scope.row.order_id,receive_name:scope.row.receive_name,time:scope.row.time,routerflag:1}}">
              <el-button class="primary" type="text"> {{scope.row.all_money|keepTwoNum}}</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table> 
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <!-- <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination> -->
      <div class="pull-right mt10" style="font-size:14px;color:#606266">
        <span style="margin-right:20px">实退货数量合计：{{returnNum}}</span>
        <span>实退货金额合计：{{returnMoney|keepTwoNum}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { getList } from '@/api/report/return_summary_form';
import { pickerOptionsF, pickerDateF,pickerDateDot, optionMaxTime,getDateString  } from '@/utils';
import { DjSimpleTable } from '@/components/table';
import { DjStoreSelect } from '@/components/store';
export default {
  components: {
    // 'dj-simple-table': DjSimpleTable,
    'dj-store-select': DjStoreSelect
  },
  data() {
    const typeList = [
      {
        id: 0,
        name: '全部'
      },
      {
        id: 1,
        name: '供应商'
      },
      {
        id: 2,
        name: '中央仓'
      }
    ];
    return { 
      list: null,
      listLoading: false, 
      typeList: typeList,
      storeName: null,
      // currentPage: 1,
      // totalDataNumber: 0,
      formInline: {
        store_id: this.$store.getters.optionId,
        begin_time: '',
        end_time: '',
        type: 0,
        look_del: '0'
      },
      pickerOptions: pickerOptionsF(-1),
      pickerDate: pickerDateDot(-1,-1),
      returnNum: 0,
      returnMoney: 0
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => { 
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.beforeComingIn();
    });
  },
  methods: {
    beforeComingIn() {
      if (this.$route.query.routerflag) {
        // console.log(this.$route.query, 'zst1119 beforeComingIn route.query');
        let col = this.$route.query.col;
        let row = this.$route.query.row;
        // 本月第一天至昨天
        let fist_day = getDateString('this_month_first_day', row.time);
        let date = new Date(row.time);
        let now = new Date();
        let yesterday;
        if (date.getMonth() == now.getMonth()) {
          yesterday = getDateString('yesterday');
        } else {
          yesterday = getDateString('this_month_last_day', row.time);
        }
        this.pickerDate = [fist_day, yesterday];
        this.formInline.store_id = row.store_id;
        // this.searchClick();
      }
      //  else {
      //   if (!this.list || this.list.length == 0) {
      //     this.searchClick();
      //   }
      // }
    },
    selectStoreChanged(obj, item) { 
      for (let key in obj) this.formInline[key] = obj[key];
      this.storeName = item.name;
      this.searchClick();
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline).then(res => { 
        let num=0,money=0;
        res.data.forEach(val=>{
          num+=val.all_num/1;
          money+=val.all_money/1;
        })
        this.list = res.data;
        this.returnNum=num;
        this.returnMoney=money;
        this.listLoading = false;
      });
      // this.currentPage = 1;
      // getPage(this.formInline)
      //   .then(response => {
      //     // console.log(11, response); 
      //     this.totalDataNumber = response.data.page * 20;
      //     this.returnNum = response.data.num ? response.data.num : 0
      //     this.returnMoney = response.data.money
      //     getList(this.formInline,this.currentPage).then(response => { 
      //       this.list = response.data;
      //       this.listLoading = false;
      //     });
      //   })
      //   .catch(res => {
      //     this.listLoading = false;
      //   });
    },
    // 分页 
    // handleCurrentChange(val) {
    //   this.listLoading = true;
    //   this.currentPage = val;
    //    getList(this.formInline,this.currentPage).then(response => { 
    //         this.list = response.data;
    //         this.listLoading = false;
    //       })
    //     .catch(res => {
    //       this.listLoading = false;
    //     });
    // }
  },
  filters:{
    // 退货渠道
    returnType(value) {
      if(value === '0') {
        return '全部'
      } else if(value === '1') {
        return '供应商'
      } else {
        return '中央仓'
      }
    }
  }
};
</script>